Day23. 深入了解 Intersection Observer API 與其應用 I

2024 iThome 鐵人賽

DAY 23

JavaScript

可愛又迷人的 Web API系列第 23 篇

16th鐵人賽

MUKIwu

2024-10-01 00:41:58

2703 瀏覽

分享至

今天要分享的是 Intersection Observer API，同樣是 Web Observer 家族 XD，他是用來觀察 DOM 元素與可視區域 (viewport) 或另一個元素之間的相交情況 (intersection)。我們可以監看元素是否進入或退出了可視區域，從而觸發相應的行為。

網路上的範例都是以懶加載 (Lazy Load) 以及無限滾動 (infinite scroll) 居多，我們只要思考一下這兩個技術的實現邏輯，就大概能了解 Intersection Observer API 的監聽方式，核心在於監控元素是否可視區域 (viewport)，並根據結果執行特定的操作。

Intersection Observer 的基本用法

跟 MutationObserver API 一樣，我們要先建立一個 Observer 物件，並設定監聽的元素

建立 IntersectionObserver 物件

首先建立 IntersectionObserver 物件。該物件接受一個 callback 和一個可選的 options：

const observer = new IntersectionObserver(callback, options);

callback：當目標元素的可見性發生變化時，這個回調函數會被觸發。
options：一個可選的配置對象，用來設定 Observer 的行為。

Options 屬性

options 常見的屬性如下：

const options = {
  root: document.querySelector('.scroll-container'),
  rootMargin: '0px',
  threshold: 0.5
};

根元素 (Root)

root 選項用來設置觀察的根元素，如果不設置，默認為視窗可視區域 (viewport)。

const options = {
  root: document.querySelector('.scroll-container'),
  threshold: 0.5
};
const observer = new IntersectionObserver(callback, options);

根元素的邊界 (RootMargin)

rootMargin 可以調整 root 的大小。我們可以擴大或縮小根元素的邊界，從而改變被視為「可見」的區域。使用方式類似 CSS 的 margin 屬性，可以設定四個方向的值，用法與格式也都雷同，例如：rootMargin: '10px 20px 10px 20px'，就是上下邊界為 10px，左右邊界為 20 px。

我們還能對 rootMargin 設定正負值，正值會擴大觀察區域，負值會縮小觀察區域。常見的情境如下：

預加載：設置正值可以在元素實際進入可視區域之前就觸發加載。
延遲加載：設置負值可以讓元素更深入可視區域才被認為是可見的。

閾值 (Threshold)

threshold 的意思是閾值，意思是我們要觸發某個變化時，需要滿足某個條件的值，這個值就是閾值 XXD，小時候理化可能有學過(?)。在此就是用來決定目標元素與 DOM 元素或可視區域 (viewport) 相交的比例達到什麼程度時，會觸發 callback。

threshold 的型態是 number，或者可以是一個陣列數字 number[]，範圍從 0 到 1，代表目標元素的可見部分比例。

例如：

const options = {
  threshold: [0, 0.5, 1]
};
const observer = new IntersectionObserver(callback, options);

在這個例子中，當目標元素從完全不可見 (0) 到 50% 可見 (0.5)，再到完全可見 (1)時，都會執行 callback。

監聽目標元素

接著使用 observe() 方法監聽目標元素：

const target = document.querySelector('.target-element');
observer.observe(target);

以上的程式碼表示，當 .target-element 與 .scroll-container 元素相交時，就會再看 threshold 的設定來決定是否觸發 callback

讓我們把它完整的寫一遍，再加上一些效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Intersection Observer Example</title>
  <style>
    /* 設置容器樣式以模擬滾動區域 */
    .scroll-container {
      width: 100%;
      height: 300px;
      overflow-y: scroll;
      border: 1px solid #ccc;
      position: relative;
    }

    /* 設置一個很高的高度來提供滾動空間 */
    .scroll-container::before {
      content: '';
      display: block;
      height: 500px;
    }

    .scroll-container::after {
      content: '';
      display: block;
      height: 500px;
    }

    /* 目標元素樣式 */
    .target-element {
      width: 100px;
      height: 100px;
      background-color: #3498db;
      margin: 20px auto;
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }

    /* 當元素進入可視區域時添加的類 */
    .visible {
      opacity: 1;
      transform: translateY(0);
    }
  </style>
</head>
<body>
  
  <div class="scroll-container">
    <div class="target-element"></div>
  </div>
  
  <script>
    const options = {
      root: document.querySelector('.scroll-container'),
      threshold: 0.5
    };
    const observer = new IntersectionObserver(callback, options);

    const target = document.querySelector('.target-element');
    observer.observe(target);

    function callback(entries) {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
          console.log('目標元素在可視區域內');
        } else {
          entry.target.classList.remove('visible');
          console.log('目標元素在可視區域外');
        }
      });
    }
  </script>
</body>
</html>